
<html lang="cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>WebSocket</title>
        <script type="text/javascript" src="socket.io.js"></script>
    </head>
    <body>
        <h1> socket.io 房间测试</h1>
        <input id="sendTxt" type="text"/>
        <button id="sendBtn">发送</button>
        <div id="recv"></div>
        <script type="text/javascript">
           
           var socket = io("ws://192.168.140.237:8000/");
            //把接收的数据显示到界面
            function showMessage(str,type){
                var div = document.createElement('div');
                div.innerHTML = str;
                if(type == "enter"){
                    div.style.color = 'blue';
                }else if(type == "leave"){
                    div.style.color = "red"
                }
                document.body.appendChild(div)
            }
     
            // 点击之后发送
            document.getElementById("sendBtn").onclick = function(){
                var txt = document.getElementById("sendTxt").value;
                if(txt){        // 文本不为空发送
                    socket.emit('join',txt);
                }
            }

           // 连接成功
           socket.on('connect', function(socket){
               showMessage("连接成功",'leave')
               // socket.join('RealTimeDataRoom');
           });

           // 连接失败
           socket.on('disconnect', function(socket){
               showMessage("连接失败",'leave')
           });

           socket.on('error', function(socket){
               showMessage("连接错误",'leave')
           });

            // 进入房间
            socket.on('connection', function(socket){
                // socket.join('some:event');
            });

            // 第一个enter代表是进入事件，第二个enter为了显示需要
            socket.on('bye',function(data){
                console.log("--------reply--------->",data);
                showMessage(data,'enter')
            })
     
            socket.on('message',function(data){
                showMessage(data,'message')
            })
     
            socket.on('leave',function(data){
                showMessage(data,'leave')
            })

            socket.on('event:name', function (data) {
                showMessage("some:event--->"+data,'some:event')
            });
     
        </script>
    </body>
    </html>